<template>
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>应急事件</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <div class="homePageCards">
          <!-- <div class="full-box">
            <img src="../../../assets/img/full.png" alt="">
            <span @click="fullscreen">全屏</span>
          </div> -->
          <!-- <div id="map" style="width: 100%; height: 100%"></div> -->
          <mapContent :mapZoom="6"></mapContent>
        </div>
      </div>
      <div class="Emergency-tb">
        <div class="Emergency-tb-bd">
          <el-form :inline="true" :model="formInline" size="small" label-width="80px">
            <div class="flexBetweens">
              <el-form-item label="发生时间：" label-width="100px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.startTime" style="width: 100%"
                  value-format="yyyy-MM-dd" :picker-options="endPickerOptions">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="至" label-width="30px" class="half">
                <el-date-picker type="date" placeholder="选择日期" v-model="formInline.endTime" style="width: 100%"
                  value-format="yyyy-MM-dd" :picker-options="startPickerOptions">
                </el-date-picker>
              </el-form-item>

              <el-form-item>
                <el-button size="small" type="primary" @click="bntHandels">查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </div>
        <div class="Emergency-tb-bt">
          <div class="Emergency-tb-bt-titel">
            <div class="Emergency-tb-bt-top">应急事件统计</div>
            <div class="Emergency-tb-bt-center">
              <!-- <el-select v-model="value" placeholder="请选择" size="mini">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select> -->
              <SelectOptions :value="sign" :options="Seleoptions" @change="selectChange" />
              <!-- <el-form slot="filter" class="form" ref="form" :model="form" inline size="small" label-width="140px">
                <el-form-item v-for="(item, index) in formData" :key="index" :prop="item.id">
                  <LsdForm :compData="item" :form="form" @node-click="deptChoose(arguments, item)"
                    popper-class="customSelect" />
                </el-form-item>
              </el-form> -->
            </div>
            <!-- <div class="Emergency-tb-bt-bottom" @click="goList">更多</div> -->
          </div>
          <div class="Emergency-tb-bt-bottom-tb">
            <div v-show="show" id="RightLine" style="width:50%; height: 100%">
              <!-- <Pie3dCharts :optionData="optionData" :totalData="{ text: '总数', num: pie_total }" charId="yjtzdcharId14" :pieOptions="{ innerSize: 170, subtitleY: 150, depth: 60, pieSize: '80%' }" v-if="isShowCharts1" :colorList="colorList"></Pie3dCharts> -->
            </div>
            <div v-show="show" class="legend_pie">
              <div>
                <div>
                  <span class="pie_bottom" style="background: #fa585a;margin-right:5px;"></span>
                  <span>特别重大/Ⅰ级</span>
                </div>
                <div style="margin-top:10px;">
                  <span class="pie_bottom" style="background: #FDDD67;margin-right:5px;"></span>
                  <span>较大/Ⅲ级</span>
                </div>

              </div>
              <div style="margin-left:40px;">
                <div>
                  <span class="pie_bottom" style="background: #F59066;margin-right:5px;"></span>
                  <span>重大/Ⅱ级</span>
                </div>
                <div style="margin-top:10px;">
                  <span class="pie_bottom" style="background: #148AF3;margin-right:5px;"></span>
                  <span>一般/Ⅳ级</span>
                </div>
              </div>
            </div>
            <div id="Car" :style="{ width: show ? '50%' : '100%', height: '100%' }">
              <BarCharts :option="option3" chartId="zwtzsd5" barChartsId="zwtzsd6" v-if="showBarChartsy">
              </BarCharts>
            </div>
          </div>
        </div>
      </div>
      <div class="Emergency-tb-zzt">
        <div class="Emergency-tb-bt-titel">
          <div class="Emergency-tb-bt-top">应急事件</div>
          <div class="Emergency-tb-bt-bottom" style="color: #fff;" @click="goList">更多<i class="el-icon-d-arrow-right"
              color="#fff"></i></div>
        </div>
        <!-- 列表表格 -->
        <!-- <LsdTable slot="gjxm" :compRef="table.compRef" ref="gjxm" :columns="table.columns" :title="table.title" :actions="table.actions" :tableData="table.tableData" :tableAttr="table.tableAttr" :isShowPage="table.isShowPage" :isSelectFlag="table.isSelectFlag" :isSequenceFlag="table.isSequenceFlag" /> -->
        <el-table :row-style="{ background: '#18283a' }" max-height="210px" :header-cell-style="{
          background: '#235ED2',
          color: '#fff',
          border: 'none',
          fontSize: '16px',
          'text-align': 'center'
        }" stripe ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" size="small">
          <el-table-column label="序号" type="index" align="center" width="100">
          </el-table-column>
          <el-table-column prop="emergencyEvent" label="应急事件" align="left" min-width="120px" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="eventName" align="center" label="事件类别">
          </el-table-column>
          <el-table-column prop="eventLvName" align="center" label="事件级别">
          </el-table-column>
          <el-table-column prop="effectRange" label="影响范围" align="left" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="occurrenceTime" label="发生时间" align="center" min-width="100px">
          </el-table-column>
          <el-table-column prop="infoSource" label="信息来源" align="center">
          </el-table-column>
          <el-table-column prop="responseName" align="left" min-width="230px" label="关联响应命令单" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="eventState" align="center" label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.eventState === '0'">编辑中</span>
              <span v-else-if="scope.row.eventState === '1'">未处理</span>
              <span v-else-if="scope.row.eventState === '2'">已处理</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import mapContent from "./components/mapContent.vue";
import { listPageEmergencyEvent, getStatistics, getLevelCitys } from "@/api/EmergencyDisposal/yjsj.js";
// import Pie3dCharts from "@/components/highCharts/HighChartsPie3d";
// import BarCharts from "@/components/highCharts/BarCharts.vue";
import SelectOptions from "@/components/selectOptions.vue";
import BarCharts from "../../EarlyWarningManagement/EWInformation/components/BarCharts.vue";
export default {
  name: "Emergency",
  components: { mapContent, BarCharts, SelectOptions },
  data() {
    return {
      showBarChartsy: false,
      sign: "",
      barOptionData: {
        barWidth: 36, // 柱子宽度
        basePointX: 36,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 6, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "82%",
        qyNum: 5,
        bdHeight: "16%",
        tooltipXandY: {
          ch1: 150,
          ch2: 30,
          ch3: 140
        },
        grid: {
          left: 50, // 左边距离
          right: 0, // 右边距离
          top: 40,
          bottom: 6,
          containLabel: true
        },
        legends: ["特别重大/I级", "重大/II级", "较大/III级", "一般/IV级"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: ["1", "2", "3"],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: [[1200], [955], [712]]
      },
      isShowCharts2: false,
      colorList: ["#fa585a", "#FDDD67", "#F59066", "#148AF3"],
      isShowCharts1: false,
      formInline: {
        startTime: "2022-10-01",
        endTime: `${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
      },
      map: null,
      geo: null,
      geocodingTask: null,
      table: {
        isSelectFlag: false, // 是否展示选择器
        compRef: "gjxm",
        isSequenceFlag: true, // 是否展示序号
        isShowPage: false, // 是否展示分页
        loading: false,
        tableData: [],
        columns: [
          {
            prop: "emergencyEvent",
            label: "应急事件",
            align: "left",
            "min-width": "230px"
          },
          {
            prop: "eventName",
            label: "事件类别",
            align: "center"
          },
          {
            prop: "eventLvName",
            label: "事件级别",
            align: "center"
          },
          {
            prop: "effectRange",
            label: "影响范围",
            align: "center"
          },
          {
            prop: "occurrenceTime",
            label: "发生时间",
            align: "center",
            "min-width": "120px"
          },
          {
            prop: "infoSource",
            label: "信息来源",
            align: "center"
          },
          {
            prop: "responseName",
            label: "关联响应命令单",
            align: "left",
            "min-width": "200px"
          },
          {
            prop: "eventState",
            label: "状态",
            align: "center",
            "min-width": "100px",
            formatter: (row, column, cellValue, index) => {
              if (cellValue === "0") {
                return "编辑中";
              } else if (cellValue === "1") {
                return "已报送";
              } else if (cellValue === "2") {
                return "已处理";
              }
            }
          }
        ],
        tableAttr: {
          "max-height": "230px",
          height: "230px",
          border: true,
          fit: true,
          "show-header": true,
          "highlight-current-row": false,
          "cell-style": {
            "font-size": "16px",
            "color": "#fff",
            "border": "none"
          },
          "header-cell-style": {
            "text-align": "center",
            "background-color": "#3270ff",
            "font-size": "16px",
            "border": "none",
            "color": "#fff"
          }
        }
      },
      tableData: [
      ],
      formData: [
        {
          elType: "selectTree",
          id: "unitName",
          name: "unitId",
          label: "发布单位部门",
          attrs: {
            value: "",
            clearable: true,
            "collapse-tags": true
          },
          options: {
            attrs: {
              value: ""
            }
          },
          treeData: {
            attrs: {
              data: []
            },
            props: {
              children: "children",
              label: "orgName",
              value: "id"
            }
          }
        }
      ],
      form: {},
      value: "1",
      pie: null, // 饼图
      shengji_bar: null,
      isShow: true,
      one_data: [],
      two_data: [],
      three_data: [],
      four_data: [],
      xAxis_data: [],
      data: [
        ["", 0],
        ["", 0],
        ["", 0],
        ["", 0]
      ],
      pie_total: null,
      option3: {
        barWidth: 36, // 柱子宽度
        basePointX: 40,
        ylib: 14, // y1点距离底部距离
        offsetHeight: 8, // 顶部和底部菱形突出的高度
        yNum: 5, // Y轴分数
        canvasH: "90%",
        bdHeight: "10%",
        qyNum: 5,
        tooltipXandY: {
          ch1: 100,
          ch2: 30,
          ch3: 150
        },
        grid: {
          left: 50, // 左边距离
          right: 15, // 右边距离
          top: 50,
          bottom: 6,
          containLabel: true
        },
        legends: ["特别重大/I级", "重大/II级", "较大/III级", "一般/IV级"],
        legendPosition: "",
        legFontSize: 12,
        tooltipdw: "",
        xAxis: [
          {
            type: "category",
            nameTextStyle: {
              color: "#fff"
            },
            fontSize: 12,
            data: [],
            axisLine: {
              lineStyle: {
                color: "#22588F"
              }
            },
            axisLabel: {
              // x轴文字的配置
              show: true,
              interval: 0, // 使x轴上的文字显示完全,
              textStyle: {
                color: "#fff"
              }
            }
          }
        ],
        yAxis: {
          type: "value",
          name: "数量:(个)",
          nameTextStyle: {
            color: "#fff",
            fontSize: 12
          }
        },
        series: []
      },
      show: true,
      Seleoptions: [],
      pid: ""
    };
  },
  computed: {
    startPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.startTime && time.getTime() < new Date(this.formInline.startTime).getTime();
        }
      };
    },
    endPickerOptions() {
      return {
        disabledDate: (time) => {
          return this.formInline.endTime && time.getTime() > new Date(this.formInline.endTime).getTime();
        }
      };
    }
  },
  mounted() {
    this.getUnitTree();
    // this.chart1 = this.$echarts.init(document.getElementById("zzt"));
    this.chart2 = this.$echarts.init(document.getElementById("RightLine"));

    setTimeout(() => {
      this.bntHandel();
    }, 500);
    this.initCharts(); // 饼图
    // this.Histogram(); // 柱状图
  },
  created() {

    this.list();
    // 当前日期
    const d = new Date();
    // 获取当前日期的前三个月的月份
    const pastMonth = d.getMonth() - 3;
    // 修改月份，如果前三个月对应没有该日期，则向后延顺
    d.setMonth(pastMonth);
    this.formInline.startTime = this.formatDate(d);
    this.formInline.endTime = this.formatDate(new Date());
  },
  methods: {
    async getUnitTree() {
      // const res = await getResourceLevelCity({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId });
      const res = await getLevelCitys({ orgId: JSON.parse(sessionStorage.getItem("org")).orgId });
      // this.formData[0].treeData.attrs.data = res;
      // this.$set(this.form, "unitId", res[0].id);
      // this.$set(this.form, "unitName", res[0].orgName);

      const arr1 = Object.keys(res).map(function (i) { return res[i]; }); // 对象转化为数组
      console.log(arr1);
      const option = arr1.map((i) => {
        return {
          label: i.orgName,
          value: i.id
        };
      });
      this.Seleoptions = option;
      this.sign = this.Seleoptions[0].label;
      this.pid = option[0].value;
      this.bntHandel(option[0].value);

    },
    formatDate(val) {
      const date = new Date(val);
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    // deptChoose(val, item) {
    //   this.$set(this.form, "unitId", val[0].id);
    //   this.$set(this.form, "unitName", val[0].orgName);
    //   this.showBarChartsy = false;
    //   this.bntHandel(val[0].id);
    //   this.$nextTick(() => {
    //     this.initCharts();
    //     // this.Histogram();
    //   });
    // },
    bntHandels() {
      this.showBarChartsy = false;
      this.bntHandel();
      // this.initMap();
      // this.list();
    },
    async bntHandel(val) {
      console.log(this.pid, " this.Seleoptionsthis.Seleoptionsthis.Seleoptions");
      const params = {
        startTime: this.formInline.startTime,
        endTime: this.formInline.endTime,
        createDeptId: this.pid
      };
      if (val) {
        params.createDeptId = val;
      }
      await getStatistics(params).then(res => {
        const data = [
          { value: 0, name: "特别重大/I级", order: 1 },
          { value: 0, name: "重大/II级", order: 2 },
          { value: 0, name: "较大/III级", order: 3 },
          { value: 0, name: "一般/IV级", order: 4 }
        ];
        let pie_total = 0;
        if (res.columnar.length && res.pie.length) {
          this.show = true;
          data.forEach(item => {
            res.pie.forEach(pieitem => {
              if (item.order == pieitem.order) {
                item.value = pieitem.number;
                item.name = pieitem.elv;
              }
            });
          });
          pie_total = res.pie.reduce(function (total, currentValue, currentIndex, arr) {
            return total + currentValue.number;
          }, 0);
          this.pie_total = pie_total;
          this.data = data;
          const list = [];
          data.forEach(el => {
            list.push([el.name, el.value]);
          });
          this.optionData = list;
          this.isShowCharts1 = true;
          this.initCharts();

          this.xAxisData = res.columnar.map(item => item.eventName);
          this.option3.xAxis[0].data = this.xAxisData;
          const datas = res.columnar.map((item) => {
            const arr = [item.oneCount ? item.oneCount : 0, item.twoCount ? item.twoCount : 0, item.threeCount ? item.threeCount : 0, item.fourCount ? item.fourCount : 0];
            return arr;
          });
          console.log(datas);
          this.option3.series = datas;
          this.showBarChartsy = true;
        } else {
          this.show = false;
          this.xAxisData = res.columnar.map(item => item.eventName);
          this.option3.xAxis[0].data = this.xAxisData;
          const datas = res.columnar.map((item) => {
            const arr = [item.oneCount ? item.oneCount : 0, item.twoCount ? item.twoCount : 0, item.threeCount ? item.threeCount : 0, item.fourCount ? item.fourCount : 0];
            return arr;
          });
          console.log(datas);
          this.option3.series = datas;
          this.showBarChartsy = true;
        }


        // let xAxis_data = [];
        // let one_data = [];
        // let two_data = [];
        // let three_data = [];
        // let four_data = [];
        // if (res.columnar.length) {
        //   xAxis_data = res.columnar.map(item => item.eventName);
        //   this.xAxis_data = xAxis_data;
        //   console.log(this.xAxis_data, " this.xAxis_data this.xAxis_data this.xAxis_data");
        //   // 一级
        //   const one_arr = res.columnar.map(item => {
        //     return item.oneCount;
        //   });
        //   // console.log(one_arr)
        //   one_data = one_arr;
        //   this.one_data = one_data;
        //   // 二级
        //   const two_arr = res.columnar.map(item => {
        //     return item.twoCount;
        //   });
        //   two_data = two_arr;
        //   this.two_data = two_data;
        //   // 三级
        //   const three_arr = res.columnar.map(item => {
        //     return item.threeCount;
        //   });
        //   three_data = three_arr;
        //   this.three_data = three_data;
        //   // 四级
        //   const four_arr = res.columnar.map(item => {
        //     return item.fourCount;
        //   });
        //   four_data = four_arr;
        //   this.four_data = four_data;
        // }
        // const arr = [];
        // one_data.forEach((el, i) => {
        //   arr[i] = [one_data[i], two_data[i], three_data[i], four_data[i]];
        // });
        // this.barOptionData.series = arr;
        // this.barOptionData.xAxis[0].data = xAxis_data;
        // this.isShowCharts2 = true;
        // this.Histogram();

      });
    },

    selectChange(item) {
      this.showBarChartsy = false;
      this.bntHandel(item);
      this.$nextTick(() => {
        this.initCharts();
        // this.Histogram();
      });
    },
    // 列表
    async list() {
      const parmas = {
        pageNum: 1,
        pageSize: 6,
        // eventState: 2
        occurrenceStartTime: `${this.formInline.startTime} 59:59:59`, // 开始时间
        occurrenceEndTime: `${this.formInline.endTime} 59:59:59` // 结束时间
      };
      const res = await listPageEmergencyEvent(parmas);

      this.tableData = res.data.filter(item => (item.eventState !== "0"));
      // this.paginationAtrrs.total = res.total
    },
    initCharts() {
      // var myChart = this.$echarts.init(document.getElementById("RightLine"));
      // let option = {};
      // // 准备重新渲染扇形所需的参数
      // let isSelected;
      // let isHovered;
      // let startRatio;
      // let endRatio;
      // let k;
      // function getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, h) {
      //   // 计算
      //   const midRatio = (startRatio + endRatio) / 2;
      //   const startRadian = startRatio * Math.PI * 2;
      //   const endRadian = endRatio * Math.PI * 2;
      //   const midRadian = midRatio * Math.PI * 2;
      //   // 如果只有一个扇形，则不实现选中效果。
      //   if (startRatio === 0 && endRatio === 1) {
      //     isSelected = false;
      //   }
      //   // 通过扇形内径/外径的值，换算出辅助参数 k（默认值 1/3）
      //   k = typeof k !== "undefined" ? k : 1 / 3;
      //   // 计算选中效果分别在 x 轴、y 轴方向上的位移（未选中，则位移均为 0）
      //   const offsetX = isSelected ? Math.cos(midRadian) * 0.1 : 0;
      //   const offsetY = isSelected ? Math.sin(midRadian) * 0.1 : 0;

      //   // 计算高亮效果的放大比例（未高亮，则比例为 1）
      //   const hoverRate = isHovered ? 1.05 : 1;
      //   // 返回曲面参数方程
      //   return {

      //     u: {
      //       min: -Math.PI,
      //       max: Math.PI * 3,
      //       step: Math.PI / 32
      //     },

      //     v: {
      //       min: 0,
      //       max: Math.PI * 2,
      //       step: Math.PI / 20
      //     },

      //     x: function (u, v) {
      //       if (u < startRadian) {
      //         return offsetX + Math.cos(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      //       }
      //       if (u > endRadian) {
      //         return offsetX + Math.cos(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      //       }
      //       return offsetX + Math.cos(u) * (1 + Math.cos(v) * k) * hoverRate;
      //     },

      //     y: function (u, v) {
      //       if (u < startRadian) {
      //         return offsetY + Math.sin(startRadian) * (1 + Math.cos(v) * k) * hoverRate;
      //       }
      //       if (u > endRadian) {
      //         return offsetY + Math.sin(endRadian) * (1 + Math.cos(v) * k) * hoverRate;
      //       }
      //       return offsetY + Math.sin(u) * (1 + Math.cos(v) * k) * hoverRate;
      //     },

      //     z: function (u, v) {
      //       if (u < -Math.PI * 0.5) {
      //         return Math.sin(u);
      //       }
      //       if (u > Math.PI * 2.5) {
      //         return Math.sin(u) * h * 0.1;
      //       }
      //       return Math.sin(v) > 0 ? 1 * h * 0.1 : -1;
      //     }
      //   };
      // }

      // // 生成模拟 3D 饼图的配置项
      // function getPie3D(pieData, internalDiameterRatio) {
      //   const series = [];
      //   let sumValue = 0;
      //   let startValue = 0;
      //   let endValue = 0;
      //   const legendData = [];
      //   const k = typeof internalDiameterRatio !== "undefined" ? (1 - internalDiameterRatio) / (1 + internalDiameterRatio) : 1 / 3;
      //   // 为每一个饼图数据，生成一个 series-surface 配置
      //   for (let i = 0; i < pieData.length; i++) {
      //     sumValue += pieData[i].value;
      //     const seriesItem = {
      //       name: typeof pieData[i].name === "undefined" ? `series${i}` : pieData[i].name,
      //       type: "surface",
      //       parametric: true,
      //       wireframe: {
      //         show: false
      //       },
      //       pieData: pieData[i],
      //       pieStatus: {
      //         selected: false,
      //         hovered: false,
      //         k: k
      //       }
      //     };

      //     if (typeof pieData[i].itemStyle != "undefined") {

      //       const itemStyle = {};

      //       typeof pieData[i].itemStyle.color != "undefined" ? itemStyle.color = pieData[i].itemStyle.color : null;
      //       typeof pieData[i].itemStyle.opacity != "undefined" ? itemStyle.opacity = pieData[i].itemStyle.opacity : null;

      //       seriesItem.itemStyle = itemStyle;
      //     }
      //     series.push(seriesItem);
      //   }

      //   // 使用上一次遍历时，计算出的数据和 sumValue，调用 getParametricEquation 函数，
      //   // 向每个 series-surface 传入不同的参数方程 series-surface.parametricEquation，也就是实现每一个扇形。
      //   for (let i = 0; i < series.length; i++) {
      //     endValue = startValue + series[i].pieData.value;

      //     series[i].pieData.startRatio = startValue / sumValue;
      //     series[i].pieData.endRatio = endValue / sumValue;
      //     series[i].parametricEquation = getParametricEquation(series[i].pieData.startRatio, series[i].pieData.endRatio, false, false, k, series[i].pieData.value);

      //     startValue = endValue;

      //     legendData.push(series[i].name);
      //   }

      //   // 补充一个透明的圆环，用于支撑高亮功能的近似实现。
      //   series.push({
      //     name: "mouseoutSeries",
      //     type: "surface",
      //     parametric: true,
      //     wireframe: {
      //       show: false
      //     },
      //     itemStyle: {
      //       opacity: 0
      //     },
      //     parametricEquation: {
      //       u: {
      //         min: 0,
      //         max: Math.PI * 2,
      //         step: Math.PI / 20
      //       },
      //       v: {
      //         min: 0,
      //         max: Math.PI,
      //         step: Math.PI / 20
      //       },
      //       x: function (u, v) {
      //         return Math.sin(v) * Math.sin(u) + Math.sin(u);
      //       },
      //       y: function (u, v) {
      //         return Math.sin(v) * Math.cos(u) + Math.cos(u);
      //       },
      //       z: function (u, v) {
      //         return Math.cos(v) > 0 ? 0.1 : -0.1;
      //       }
      //     }
      //   });

      //   // 准备待返回的配置项，把准备好的 legendData、series 传入。
      //   option = {
      //     // animation: false,
      //     tooltip: {
      //       formatter: params => {
      //         if (params.seriesName !== "mouseoutSeries") {
      //           return `${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}`;
      //         }
      //       }
      //     },
      //     xAxis3D: {
      //       min: -1,
      //       max: 1
      //     },
      //     yAxis3D: {
      //       min: -1,
      //       max: 1
      //     },
      //     zAxis3D: {
      //       min: -1,
      //       max: 1
      //     },
      //     grid3D: {
      //       show: false,
      //       boxHeight: 20,
      //       viewControl: {// 3d效果可以放大、旋转等，请自己去查看官方配置
      //         alpha: 30,
      //         // beta: 40,
      //         rotateSensitivity: 0,
      //         zoomSensitivity: 0,
      //         panSensitivity: 0,
      //         autoRotate: false
      //       },
      //       // 后处理特效可以为画面添加高光、景深、环境光遮蔽（SSAO）、调色等效果。可以让整个画面更富有质感。
      //       postEffect: {// 配置这项会出现锯齿，请自己去查看官方配置有办法解决
      //         enable: true,
      //         bloom: {
      //           enable: true,
      //           bloomIntensity: 0.1
      //         },
      //         SSAO: {
      //           enable: true,
      //           quality: "medium",
      //           radius: 2
      //         }
      //       }
      //     },
      //     series: series
      //   };
      //   return option;
      // }

      // // 传入数据生成 option
      // option = getPie3D([{
      //   name: this.data[0].name,
      //   value: this.data[0].value,
      //   itemStyle: {
      //     color: "#FA585A"
      //   }
      // }, {
      //   name: this.data[1].name,
      //   value: this.data[1].value,
      //   itemStyle: {
      //     color: "#F5885C"
      //   }
      // }, {
      //   name: this.data[2].name,
      //   value: this.data[2].value,
      //   itemStyle: {
      //     color: "#FEDF6E"
      //   }
      // }, {
      //   name: this.data[3].name,
      //   value: this.data[3].value,
      //   itemStyle: {
      //     color: "#258FE9"
      //   }
      // }], 0.59);


      // // 监听鼠标事件，实现饼图选中效果（单选），近似实现高亮（放大）效果。
      // let selectedIndex = "";
      // let hoveredIndex = "";

      // // 监听点击事件，实现选中效果（单选）
      // myChart.on("click", function (params) {
      //   // 从 option.series 中读取重新渲染扇形所需的参数，将是否选中取反。
      //   const isSelected = !option.series[params.seriesIndex].pieStatus.selected;
      //   const isHovered = option.series[params.seriesIndex].pieStatus.hovered;
      //   const k = option.series[params.seriesIndex].pieStatus.k;
      //   const startRatio = option.series[params.seriesIndex].pieData.startRatio;
      //   const endRatio = option.series[params.seriesIndex].pieData.endRatio;


      //   // 如果之前选中过其他扇形，将其取消选中（对 option 更新）
      //   if (selectedIndex !== "" && selectedIndex !== params.seriesIndex) {
      //     option.series[selectedIndex].parametricEquation = getParametricEquation(option.series[selectedIndex].pieData.startRatio, option.series[selectedIndex].pieData.endRatio, false, false, k, option.series[selectedIndex].pieData.value);
      //     option.series[selectedIndex].pieStatus.selected = false;
      //   }

      //   // 对当前点击的扇形，执行选中/取消选中操作（对 option 更新）
      //   option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[selectedIndex].pieData.value);
      //   option.series[params.seriesIndex].pieStatus.selected = isSelected;

      //   // 如果本次是选中操作，记录上次选中的扇形对应的系列号 seriesIndex
      //   isSelected ? selectedIndex = params.seriesIndex : null;

      //   // 使用更新后的 option，渲染图表
      //   myChart.setOption(option);
      // });

      // // 监听 mouseover，近似实现高亮（放大）效果
      // myChart.on("mouseover", function (params) {



      //   // 如果触发 mouseover 的扇形当前已高亮，则不做操作
      //   if (hoveredIndex === params.seriesIndex) {
      //     return;

      //     // 否则进行高亮及必要的取消高亮操作
      //   } else {

      //     // 如果当前有高亮的扇形，取消其高亮状态（对 option 更新）
      //     if (hoveredIndex !== "") {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 false。
      //       isSelected = option.series[hoveredIndex].pieStatus.selected;
      //       isHovered = false;
      //       startRatio = option.series[hoveredIndex].pieData.startRatio;
      //       endRatio = option.series[hoveredIndex].pieData.endRatio;
      //       k = option.series[hoveredIndex].pieStatus.k;

      //       // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //       option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
      //       option.series[hoveredIndex].pieStatus.hovered = isHovered;

      //       // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //       hoveredIndex = "";
      //     }

      //     // 如果触发 mouseover 的扇形不是透明圆环，将其高亮（对 option 更新）
      //     if (params.seriesName !== "mouseoutSeries") {
      //       // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //       isSelected = option.series[params.seriesIndex].pieStatus.selected;
      //       isHovered = true;
      //       startRatio = option.series[params.seriesIndex].pieData.startRatio;
      //       endRatio = option.series[params.seriesIndex].pieData.endRatio;
      //       k = option.series[params.seriesIndex].pieStatus.k;

      //       // 对当前点击的扇形，执行高亮操作（对 option 更新）
      //       option.series[params.seriesIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[params.seriesIndex].pieData.value + 5);
      //       option.series[params.seriesIndex].pieStatus.hovered = isHovered;

      //       // 记录上次高亮的扇形对应的系列号 seriesIndex
      //       hoveredIndex = params.seriesIndex;
      //     }

      //     // 使用更新后的 option，渲染图表
      //     myChart.setOption(option);
      //   }
      // });

      // // 修正取消高亮失败的 bug
      // myChart.on("globalout", function () {


      //   if (hoveredIndex !== "") {
      //     // 从 option.series 中读取重新渲染扇形所需的参数，将是否高亮设置为 true。
      //     isSelected = option.series[hoveredIndex].pieStatus.selected;
      //     isHovered = false;
      //     k = option.series[hoveredIndex].pieStatus.k;
      //     startRatio = option.series[hoveredIndex].pieData.startRatio;
      //     endRatio = option.series[hoveredIndex].pieData.endRatio;

      //     // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
      //     option.series[hoveredIndex].parametricEquation = getParametricEquation(startRatio, endRatio, isSelected, isHovered, k, option.series[hoveredIndex].pieData.value);
      //     option.series[hoveredIndex].pieStatus.hovered = isHovered;

      //     // 将此前记录的上次选中的扇形对应的系列号 seriesIndex 清空
      //     hoveredIndex = "";
      //   }

      //   // 使用更新后的 option，渲染图表
      //   myChart.setOption(option);
      // });

      // if (option) {
      //   myChart.setOption(option);
      // }
      this.$Highcharts.chart("RightLine", {
        chart: {
          type: "pie",
          options3d: {
            enabled: true,
            alpha: 45,
            beta: 0
          },
          backgroundColor: "transparent",
          marginTop: -50
          // marginRight: 20
        },
        title: {
          text: ""
        },
        credits: {
          enabled: false
        },
        tooltip: {
          formatter() {
            return `<div><span style="font-size: 14px;color:${this.point.color}">●</span><span style="font-size: 14px;color:#fff">${this.point.name}:</span><span style="color:#fff;font-size: 14px" >${this.point.y}</span></div>`;
          },
          backgroundColor: "rgba(22,66,120)",
          style: {
            color: "#fff",
            fontSize: "14px"
          }
        },
        subtitle: {
          floating: true,
          text: `<span style="font-size:25px;font-weight:bold;color:#fff">${this.pie_total}</span><br/><span style="font-size:14px;color:#fff">总数</span>`,
          x: 0,
          y: 150
        },
        plotOptions: {
          pie: {
            allowPointSelect: false,
            cursor: "pointer",
            depth: 55,
            dataLabels: {
              enabled: false,
              // format: '{point.name}<br/>{point.y}',
              formatter: function () {
                if (this.percentage > 0) { return `<span style="font-size:14px;font-weight:bold;color:${this.point.color}">${this.point.name}</span><br/><span style="font-size:14px;color:${this.point.color}">${this.point.y}</span>`; }
              },
              style: {
                color: "#Fff",
                fontSize: "14px"
              }
            }, states: {
              inactive: {
                opacity: 1
              }
            }
          }
        },
        colors: [
          "#FA585A",
          "#F5885C",
          "#FEDF6E",
          "#258FE9"
        ],
        series: [{
          size: "70%",
          innerSize: "60%",
          type: "pie",
          data: [
            [this.data[0].name, this.data[0].value === 0 ? null : this.data[0].value],
            [this.data[1].name, this.data[1].value === 0 ? null : this.data[1].value],
            [this.data[2].name, this.data[2].value === 0 ? null : this.data[2].value],
            [this.data[3].name, this.data[3].value === 0 ? null : this.data[3].value]
          ]
        }]
      });
    },
    Histogram() {
      const data1 = this.four_data;
      const data2 = this.three_data;
      const data3 = this.two_data;
      const data4 = this.one_data;
      const datas = [data1, data2, data3, data4];
      const obj = {};
      datas.reduce((pre, cur, index) => {
        if (index === 4) return [];
        pre = cur.map((item, i) => pre[i] ? pre[i] + item : item);
        obj[`data${index + 1}`] = pre;
        return pre;
      }, []);
      this.chart1.setOption(
        {
          tooltip: {
            trigger: "item",
            axisPointer: {
              type: "shadow"
            },
            backgroundColor: "rgba(0,24,34,0.25)",
            borderWidth: 0,
            textStyle: {
              color: "#fff"
            },
            formatter(params) {

              const finishedCount = data1[params.dataIndex];
              const unFinishedCount = data2[params.dataIndex];
              const finishedCount1 = data3[params.dataIndex];
              const unFinishedCount1 = data4[params.dataIndex];
              return `<div style='display: flex;align-items: center;width: 100px'>${params.name}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #278dec;border-radius: 50%;margin-right: 10px'></div>一般/IV级: ${finishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ffb400;border-radius: 50%;margin-right: 10px'></div>较大/III级: ${unFinishedCount}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #fb6421;border-radius: 50%;margin-right: 10px'></div>重大/II级: ${finishedCount1}</div>
              <div style='display:flex;align-items: center;'><div style='width: 11px;height: 11px;background: #ff0048;border-radius: 50%;margin-right: 10px'></div>特别重大/I级: ${unFinishedCount1}</div>`;
            }
          },
          grid: {
            top: "22%",
            right: "5%",
            bottom: "15%",
            left: "5%"
          },
          xAxis: {
            data: this.xAxis_data,
            axisTick: {
              show: false
            },
            axisLine: {
              show: false
            },
            axisLabel: {
              textStyle: {
                // color: "#9ed2f9"
                color: "#fff"
              },
              margin: 20 // 刻度标签与轴线之间的距离。
            }
          },
          yAxis: [
            {
              splitNumber: 10,
              name: "数量",
              nameTextStyle: {
                color: "#fff",
                aligh: "left"
              },
              min: 0,
              // max: 7,
              interval: 2,
              splitLine: {
                // 网格线
                lineStyle: {
                  type: "dashed", // 设置网格线类型 dotted：虚线   solid:实线
                  color: "rgba(16,64,119)"// 网格线颜色
                }
              },
              axisLabel: {
                show: true,
                textStyle: {
                  color: "#fff"
                }
              }
            }
          ],
          series: [
            {
              name: "蓝色",
              data: datas[0],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#278dec"
                    },
                    {
                      offset: 1,
                      color: "#5cbcff"
                    }
                  ]
                }
              }
            },
            {
              name: "黄色",
              data: datas[1],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ffb400"
                    },
                    {
                      offset: 1,
                      color: "#fbd180"
                    }
                  ]
                }
              }
            },
            {
              name: "橙色",
              data: datas[2],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#fb6421 "
                    },
                    {
                      offset: 1,
                      color: "#ffa882"
                    }
                  ]
                }
              }
            },
            {
              name: "红色",
              data: datas[3],
              type: "bar",
              stack: "plan",
              barWidth: 30,
              itemStyle: {
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  type: "linear",
                  global: false,
                  colorStops: [
                    {
                      offset: 0,
                      color: "#ff0048"
                    },
                    {
                      offset: 1,
                      color: "#F1A2A2"
                    }
                  ]
                }
              }
            },
            {
              data: [0, 0, 0, 0, 0, 0],
              type: "pictorialBar",
              symbol: "diamond",
              symbolOffset: [0, "50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: "#5cbcff"
                }
              }
            },
            {
              data: obj.data1,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#278dec"
                      },
                      {
                        offset: 1,
                        color: "#5cbcff"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data2,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ffb400"
                      },
                      {
                        offset: 1,
                        color: "#fbd180"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data3,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [30, 10],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#fb6421 "
                      },
                      {
                        offset: 1,
                        color: "#ffa882"
                      }
                    ]
                  }
                }
              }
            },
            {
              data: obj.data4,
              type: "pictorialBar",
              symbol: "diamond",
              symbolPosition: "end",
              symbolOffset: [0, "-50%"],
              symbolSize: [33, 12],
              zlevel: 2,
              itemStyle: {
                normal: {
                  color: {
                    colorStops: [
                      {
                        offset: 0,
                        color: "#ff0048"
                      },
                      {
                        offset: 1,
                        color: "#F1A2A2"
                      }
                    ]
                  }
                }
              }
            }
          ]
        }
      );
    },
    goList() {
      this.$router.push({
        name: "EmergencyList"
      });
    }
  }
};
</script>

<style scoped lang="less">
:deep(.el-table th.el-table__cell > .cell) {
  color: rgb(255, 255, 255) !important;
}

:deep(.el-empty) {
  padding: 100px 0 !important;
}

.Emergency-tb-bt-center {
  margin-right: 32px;
  height: 58px;

  .select-class .el-select {
    width: 150px !important;
  }

  :deep(.el-select) {
    width: 200px !important;

  }

  :deep(.el-input__suffix) {
    top: 4px;
  }
}

.Emergency {
  height: 95%;
  padding: 0px 20px;
  margin: 0;

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  // /deep/.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  //   padding: 0px 0 !important;
  // }
  /deep/.el-select-dropdown__item {
    background: none !important;
  }

  .bottom-start :deep(.el-select-dropdown .el-popper) {
    left: 1614px !important;
  }

  .form {
    :deep(.el-select-dropdown__wrap .el-scrollbar__wrap) {
      background-color: red !important;
    }

    :deep(.el-input__suffix) {
      top: 6px !important;
    }

    :deep(.el-select-dropdown__item) {
      background: none !important;
    }

    :deep(.el-select-dropdown) {
      border: none !important;
      border-radius: 4px !important;
      background: none !important;
      margin: 0 !important;
    }

    :deep(.el-select-dropdown__wrap .el-scrollbar__wrap) {
      margin-bottom: 0;
      margin-right: -27px;
    }
  }

  :deep(.el-table--border::after, .el-table--group::after) {
    width: 0;
  }

  :deep(.el-input__inner) {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    font-style: normal;
    color: #eeeeee;
  }

  //鼠标悬浮样式
  :deep(tr.hover-row) {

    &,
    &.el-table__row--striped {

      &,
      &.current-row {
        >td.el-table__cell {
          background-color: transparent;
        }
      }
    }
  }

  /deep/ .el-table__body {
    color: #fff !important;
  }

  /deep/ .el-table td {
    border-bottom: 0px solid #dfe6ec !important;
  }

  /deep/ .el-table th {
    border-bottom: 0px solid #dfe6ec !important;
  }

  :deep(div::-webkit-scrollbar) {
    width: 5px;
  }

  :deep(.gutter) {
    background-color: transparent !important;
    border: none !important;
  }

  :deep(.el-table) {
    border: none;
  }

  /deep/ .el-table__fixed::before {
    background: none;
  }

  // :deep(.el-table__fixed) {
  //   position: static !important;
  // }
  .Emergency-tb-zzt /deep/ .el-table tr {
    background-color: transparent !important;
    border: none;
  }

  :deep(.el-table) {
    &::before {
      height: 0px;
    }
  }

  .cell {
    color: rgb(255, 255, 255);
  }

  .el-table--border::after,
  .el-table--group::after {
    width: 0px;
    height: 0px;
  }

  :deep(div::-webkit-scrollbar-thumb) {
    border-radius: 10px;
    box-shadow: none;
    background-color: transparent;
  }

  :deep(div::-webkit-scrollbar-track) {
    border-radius: 0;
    background: transparent;
    border: none;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    background-color: transparent;
  }

  .customer-table .el-table__fixed-right::before,
  .el-table__fixed::before {
    width: 0;
  }

  :deep(.el-table__body tr:hover > td) {
    background: none !important;
  }

  :deep(.el-table, .el-table__expanded-cell) {
    .background-row {
      background: rgba(255, 255, 255, 0.2);
    }

    background-color: transparent;

    .el-table__body-wrapper.is-scrolling-left {
      height: 482px;
    }

    .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
      background: rgba(255, 255, 255, 0.2);
    }

    .el-table td {
      border-bottom: none;
      color: #fff;
      font-size: 16px;
    }

    .el-table th {
      border-bottom: none;
    }

    .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
      background-color: transparent;
    }
  }

  :deep(.el-table__footer-wrapper tbody td.el-table__cell, .el-table__header-wrapper tbody td.el-table__cell) {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
  }

  :deep(.el-table.bottomTable) {
    font-size: 12px;
    margin-top: 5px;

    div.cell {
      padding-left: 0;
      padding-right: 0;
      font-size: 12px;
    }

    th.el-table__cell {
      background-color: #265cff;
    }
  }

  :deep(.el-table--striped .el-table__body tr.el-table__row--striped.el-table__row--striped.el-table__row--striped td) {
    background-color: rgba(255, 255, 255, 0.2);
    /*隔行变色*/
    // background: transparent;
  }

  .half {
    width: 50%;
    display: flex;

    :deep(.el-form-item__content) {
      flex: 1 !important;
    }

    :deep(.el-select) {
      width: 100% !important;
    }

    :deep(.el-input) {
      width: 100% !important;
    }

    :deep(.el-date-editor) {
      width: 100% !important;
    }
  }

  :deep(.el-table__row) {
    font-size: 16px;
  }

  :deep(.has-gutter) {
    font-size: 16px !important;
  }

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-form-item__label) {
    font-size: 16px;
  }

  :deep(.el-button) {
    font-size: 16px;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-center {
    width: 100%;
    height: 100%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .Emergency-dt {
      width: 50%;
      height: 65%;
      border: rgba(10, 73, 187) 1px solid;

      .homePageCards {
        position: relative;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 2px;
        border-radius: 5px;

        #map {
          border-radius: 5px;
        }
      }

      .full-box {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        font-size: 18px;
        font-weight: 700;
        z-index: 9;
        background-color: #fff;
        cursor: pointer;
        padding: 3px 8px;
        border-radius: 5px;

        img {
          width: 15px;
          height: 15px;
          margin-right: 5px;
        }
      }

      .full {
        position: absolute;
        bottom: 10px;
        right: 10px;
        z-index: 9;
        background-color: rgba(255, 255, 255, 0.654901960784314);

        .full-boxs {
          display: flex;
          align-items: center;
          font-size: 17px;
          font-weight: 600;
          z-index: 9;
          background-color: rgba(255, 255, 255, 0.654901960784314);
          cursor: pointer;
          padding: 3px 10px;
          border-radius: 5px;

          img {
            width: 15px;
            height: 15px;
            margin-right: 5px;
          }
        }
      }

      :deep(.epgis-popup-content) {
        width: 370px !important;
        height: 130px !important;
        border-radius: 2px !important;
        background-color: #7e8aa6 !important;
        opacity: 0.8;
        // background-image: url("../../../../assets/map/u5.png");
      }

      :deep(.epgis-popup-anchor-top-right .epgis-popup-tip) {
        border-bottom-color: #7e8aa6 !important;
        opacity: 0.8;
      }
    }

    .Emergency-tb {
      width: 49%;
      height: 65%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .Emergency-tb-bd {
        width: 100%;
        height: 10%;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 2px;

        .flexBetweens {
          align-items: center;
        }

        :deep(.el-form) {
          margin-top: 7px;
        }

        :deep(.el-button--primary) {
          border: none;
          width: 75px;
          margin-left: 53px;
        }

        :deep(.el-form-item__label) {
          font-family: PingFang SC;
          font-weight: 400;
          font-style: normal;
          color: #eeeeee;
        }

        :deep(.el-form-item__content) {
          width: 60%;
        }

        :deep(.el-input__inner) {
          background-color: transparent !important;
          border: rgba(10, 73, 187) 1px solid;
          color: #fff;
        }
      }

      .Emergency-tb-bt {
        width: 100%;
        height: 85%;
        border: rgba(10, 73, 187) 1px solid;
        border-radius: 2px;

        :deep(.el-input__inner) {
          height: 30px;
          line-height: 30px;
          font-size: 14px;
          border: rgba(10, 73, 187) 1px solid;
          border-radius: 5px;
          color: #eeeeee;
          background-color: #174ad5;
          margin-top: 15px;
        }

        :deep(.el-select__caret) {
          color: #fff;
          font-size: 16px;
        }

        .Emergency-tb-bt-bottom-tb {
          width: 100%;
          height: 90%;
          position: relative;
          display: flex;

          .legend_pie {
            position: absolute;
            left: 25%;
            bottom: 5%;
            display: flex;
            align-items: center;
            transform: translateX(-50%);

            div {
              color: #fff;
            }
          }

          .pie_bottom {
            display: inline-block;
            text-align: center;
            height: 15px;
            width: 20px;
            line-height: 16px;
            border-radius: 3px;
          }
        }
      }
    }

    :deep(.el-select--small) {
      min-width: 200px !important;
    }

    .Emergency-tb-zzt {
      width: 100%;
      height: 33%;
      padding: 0 5px;
      // background-color: #eeeeee;
      border: rgba(10, 73, 187) 1px solid;

      .Emergency-tb-bt-titel {
        background: none;
        height: 12% !important;

        .Emergency-tb-bt-top {
          margin: 0;
        }

        .Emergency-tb-bt-bottom {
          color: #d9dee6;
        }
      }
    }
  }
}
</style>
